<template>
  <div class="home">
    <p>计数器</p>
    <div id="all" ref="all">
      <input
        type="text"
        class="inp1"
        @focus="inputFoc1"
        @blur="inputBlur1"
        v-model.number="inp1"
        placeholder="请输入初值"
      />
      <p class="midTxt">至</p>
      <input
        type="text"
        class="inp2"
        @focus="inputFoc2"
        @blur="inputBlur2"
        v-model.number="inp2"
        placeholder="请输入终值"
      />
    </div>
    <p>精度：</p>
    <input type="text" v-model="per" />
    <button @click="sub">提交数据</button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  data() {
    return {
      inp1: "",
      inp2: "",
      per: "", // 精度
    };
  },
  methods: {
    inputFoc1() {
      this.$refs.all.style.border = "1px solid #409EFF";
    },
    inputBlur1() {
      this.$refs.all.style.border = "1px solid #dcdfe6";
      // this.inp1 = this.inp1.replaceAll(" ", "")
      if (Number.isNaN(Number.parseFloat(this.inp1))) {
        this.inp1 = "";
      }
      if (this.per) {
        console.log(this.per);
        this.inp1 === ""
          ? (this.inp1 = "")
          : (this.inp1 = (this.inp1 * 1).toFixed(this.per));
        this.inp2 === ""
          ? (this.inp2 = "")
          : (this.inp2 = (this.inp2 * 1).toFixed(this.per));
      }
      if (this.inp2 !== "" && this.inp1 !== "") {
        if (this.inp2 * 1 < this.inp1 * 1) {
          [this.inp1, this.inp2] = [this.inp2, this.inp1];
        }
      }
      console.log([this.inp1, this.inp2]);
    },
    inputFoc2() {
      this.$refs.all.style.border = "1px solid #409EFF";
    },
    inputBlur2() {
      this.$refs.all.style.border = "1px solid #dcdfe6";
      if (Number.isNaN(Number.parseFloat(this.inp2))) {
        this.inp2 = "";
      }
      if (this.per) {
        this.inp1 === ""
          ? (this.inp1 = "")
          : (this.inp1 = (this.inp1 * 1).toFixed(this.per));
        this.inp2 === ""
          ? (this.inp2 = "")
          : (this.inp2 = (this.inp2 * 1).toFixed(this.per));
      }
      if (this.inp2 !== "" && this.inp1 !== "") {
        if (this.inp2 * 1 < this.inp1 * 1) {
          [this.inp1, this.inp2] = [this.inp2, this.inp1];
        }
      }
      console.log([this.inp1, this.inp2]);
    },
    sub() {
      console.log(
        `${[this.inp1, this.inp2]}，精度：${
          this.per
        } 位小数，默认精度为 任意 位小数.`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
#all {
  width: 250px;
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  align-items: center;
  padding: 3px 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  &:hover {
    border: 1px solid #c0c4cc;
  }
  .inp1 {
    width: 40%;
    text-align: center;
  }
  .inp2 {
    width: 40%;
    text-align: center;
  }
  .midTxt {
    width: 5%;
    padding: 0 5px;
    text-align: center;
    min-width: 22px;
  }
}
</style>
